<template>
	<div>
		<div class="title">
			<p>猜你喜欢</p>
		</div>
		<div class="guess">
			
			<div class="guess_box">
				
				<div class="guess_item" v-for="item in goods" :key="item.id" @click="gotoDetail(item.id)">
					<div class="guess_item_img">
						<img :src="item.picture" alt="" />
					</div>
					
					<div class="guess_item_text">
						<span class="guess_item_text_title">{{item.name}}</span>
						<span class="guess_item_text_price">￥{{item.price}}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	
import request from '../../../src/api/request.js'	
	export default {
		name:'guess',
		data() {
			return {
				page_now:1,
				goods:[]
			}
		},
		mounted(){
			this.getData()
			window.addEventListener("scroll", this.handleScroll, true);
		},
		methods:{
			// 获取所有商品数据
		async getData(){
				let res=await  request({
					url:`/home/goods/guessLike`,
					method:'get'
				})
				this.goods=res.result.items
				
				
			},
			async update_data(){
					let res=await  request({
						url:`/home/goods/guessLike?page=${++this.page_now}`,
						method:'get'
					})
					this.goods.push(...res.result.items)
					
					
				},
			handleScroll(){
			           let scrollTop = document.documentElement.scrollTop;//滚动高度
			           let clientHeight = document.documentElement.clientHeight;//可视高度
			           let scrollHeight = document.documentElement.scrollHeight;//内容高度
			           // console.log("滚动高度",scrollTop);
			           // console.log("可视高度",clientHeight);
			           // console.log("内容高度",scrollHeight);
									if(scrollTop+clientHeight===scrollHeight){
										this.update_data()
										
									}
			       },
			
			// 跳转商品详细页面
			gotoDetail(id){
				this.$router.push({
					name:'detail',
					query:{
						id
					}
				})
			}
		}
	}
	
</script>

<style lang="scss">
	// 猜你喜欢
	
	.title{
		width: 100%;
		height: 100px;
		background-color: #F7F7F7;
		p{
			font-size: 30px;
			text-align: center;
			color: gray;
		}
	}
	.guess{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		box-sizing: border-box;
		.guess_box{
			width: 100%;
			height: 100%;
			background-color:#F7F7F7;
			margin-bottom: 100px;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			box-sizing: border-box;
			.guess_item{
				background-color: white;
				width: 46%;
				height: 500px;
				border-radius: 10px;
				margin-bottom: 10px;
				margin-left: 20px;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: flex-start;
				.guess_item_img{
					
					width: 100%;
					height: 70%;
					
					display: flex;
					justify-content:center;
					align-items: center;
					img{
						width: 80%;
						height: 80%;
					}
					
				}
				.guess_item_text{
					width: 100%;
					height: 20%;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					
					.guess_item_text_title{
						width: 100%;
						height: 70%;
						font-size: 26px;
						padding: 0px 20px;
						overflow: hidden;
					}
					.guess_item_text_price{
						
						width: 100%;
						height: 30%;
						font-size: 25px;
						
						padding-left: 25px;
						color: #985451;
						padding-top: 15px;
					}
				}
			}
		}
	}
</style>